<template>
  <div>
    <el-steps :active="goodsFormStore.step" align-center finish-status="success">
      <el-step title="基本信息" description="spu的信息"/>
      <el-step title="规格参数" description="spu的通用规格参数"/>
      <el-step title="销售属性" description="sku的销售属性"/>
      <el-step title="SKU信息" description="sku信息"/>
      <el-step title="保存完成" description="提交"/>
    </el-steps>
    <el-card style="margin-top: 50px">
      <template #header>
        <div style="display: flex;justify-content: space-between">
          <span>{{ cardTitle }}</span>
          <el-button type="primary" @click="goodsFormStore.$reset()">重置表单</el-button>
        </div>
      </template>
      <el-row justify="center">
        <el-col :span="24">
          <Add-spu v-if="goodsFormStore.step===0"></Add-spu>
          <add-attribute v-else-if="goodsFormStore.step===1"></add-attribute>
          <add-sales-attr v-else-if="goodsFormStore.step===2"></add-sales-attr>
          <add-sku v-else-if="goodsFormStore.step===3"></add-sku>
          <div v-else-if="goodsFormStore.step===4">
            <el-result
                icon="success"
                title="提交成功！"
                sub-title="你可以选择再看看或者继续录入"
            >
              <template #extra>
                <el-button @click="resetForm">继续</el-button>
                <el-button type="primary">再看看</el-button>
              </template>
            </el-result>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import AddSpu from '@/components/re-market/AddSpu.vue'
import AddAttribute from '@/components/re-market/AddAttribute.vue'
import AddSalesAttr from '@/components/re-market/AddSalesAttr.vue'
import AddSku from '@/components/re-market/AddSku.vue'
import {reactive, computed,} from "vue";
import {useGoodsFormStore} from "@/stores/form/goods-form";

const goodsFormStore = useGoodsFormStore()
/*计算属性*/
let cardTitle = computed(() => {
  switch (goodsFormStore.step) {
    case 0:
      return "基本信息"
    case 1:
      return "规格参数"
    case 2:
      return "销售属性"
    case 3:
      return "SKU信息"
    case 4:
      return "完成"
  }
})
let resetForm = () => {
  goodsFormStore.$reset()
}
</script>
<style scoped>
</style>
